import { ComponentInterface } from "../framework/core/Component";
import CanvasScreen from "../framework/ui/canvas/CanvasScreen";
import Container, { Alignment } from "../framework/layout/Container";
import JoyStick, { JoystickDragEvent, JoystickMode } from "../framework/ui/canvas/JoyStick";
import Driver from "../utils/Driver";
import Stack from "@/framework/layout/Stack";
import Segment from "@/framework/ui/canvas/Segment";
import Row from "@/framework/layout/Row";
import { CrossAxisAlignment, MainAxisAlignment } from "@/framework/layout/Flex";
import TwoWayProgress from "@/framework/ui/canvas/TwoWayProgress";

export default class HomeScreen extends CanvasScreen {
  driver: Driver
  progress1: TwoWayProgress
  progress2: TwoWayProgress
  constructor() {
    super({})
    this.driver = new Driver()
    this.progress1 = new TwoWayProgress({ width: 80, negativeColor: 'red', positiveColor: 'green' })
    this.progress2 = new TwoWayProgress({ width: 80, negativeColor: 'red', positiveColor: 'green' })
  }

  handleDrag(evt: JoystickDragEvent) {
    if(evt.mode === JoystickMode.horizontal) {
      this.driver.setAngle(evt.uv.dx)
    } else if(evt.mode === JoystickMode.vertical) {
      this.driver.setThrottle(-evt.uv.dy)
    }
    if(this.progress1) this.progress1.setPercent(this.driver.getThrottle() * 100)
    if(this.progress2) this.progress2.setPercent(this.driver.getAngle() * 100)
  }

  build(): ComponentInterface | ComponentInterface[] {
    var handleDrag = this.handleDrag.bind(this)
    return [
      new Container({
        alignment: Alignment.bottomLeft,
        child: new JoyStick({
          mode: JoystickMode.vertical,
          width: 226,
          height: 226,
          onDrag: handleDrag
        })
      }),
      new Container({
        alignment: Alignment.bottomRight,
        child: new JoyStick({
          mode: JoystickMode.horizontal,
          width: 226,
          height: 226,
          onDrag: handleDrag
        })
      }),
      new Stack({
        alignment: Alignment.topCenter,
        children: [
          new Row({
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              this.progress1,
              new Segment({
                width: 180,
                height: 38,
                borderRadius: 6,
                contents: ['red', 'green', 'blue'],
                indicatorColor: 'rgba(255,255,255,0.15)',
                activeColor: 'white',
                color: 'white'
              }),
              this.progress2,
            ]
          }),
        ]
      }),
    ]
  }
}